<script setup lang="ts">
import { StorageConst } from '@/common/constants';
import { reactive, ref } from 'vue';
// typescript
const historyCache: string[] = uni.getStorageSync(StorageConst.SEARCH_HISTORY) || [];
const state = reactive({
  // 是否已展开搜索
  isSearch: false,
  keyword: "",
  defaultKeyword: "新款2022年高端智能手机"
});
const searchHistorys = ref<string[]>(historyCache ? historyCache : []);

// 搜索事件触发
const onSearch = () => {
  state.isSearch = true;

  // 写历史记录
  if (!state.keyword.trim()) {
    if (state.defaultKeyword) {
      state.keyword = state.defaultKeyword;
    } else {
      return
    }
  }
  if (historyCache.includes(state.keyword.trim())) {
    return
  }
  historyCache.push(state.keyword.trim());
  searchHistorys.value = historyCache;
  uni.setStorageSync(StorageConst.SEARCH_HISTORY, historyCache);
}

// 清空搜索历史记录
const onRemoveHistory = () => {
  searchHistorys.value = [];
  uni.removeStorageSync(StorageConst.SEARCH_HISTORY);
}
</script>

<!-- 搜索页 -->
<template>
  <view class="container">
    <!-- 头部导航 -->
    <view class="header-nav">
      <view class="statusbar"></view>
      <view class="header-view">
        <view>
          <navigator open-type="navigateBack">
            <uni-icons color="#fff" type="back" size="24"></uni-icons>
          </navigator>
        </view>
        <view class="search-view">
          <uni-easyinput @confirm="onSearch" prefixIcon="search" v-model="state.keyword" confirmType="search" clearable
            trim="both" :inputBorder="false" :placeholder="state.defaultKeyword">
          </uni-easyinput>
        </view>
        <view class="right-btn">
          <view class="link" @click="onSearch">搜索</view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
    <template v-if="!state.isSearch">
      <!-- 搜索历史记录 -->
      <view class="search-history-view">
        <!-- 历史记录 -->
        <view v-if="searchHistorys.length" class="history-view">
          <uni-section title="历史搜索">
            <template #right>
              <uni-icons @click="onRemoveHistory" color="#FF2121" type="trash" size="24"></uni-icons>
            </template>
            <!-- 历史记录列表 -->
            <view class="hsitory-list">
              <template v-for="(item, index) in searchHistorys" :key="index">
                <view @click="state.keyword = item" hover-class="hover-class-opacity" class="tag">
                  {{ item }}
                </view>
              </template>
            </view>
          </uni-section>
        </view>
        <!-- 热门搜索 -->
        <view class="hot-search">
          <!-- 热门搜索标题 -->
          <view class="hot-title">
            <text>热门搜索</text>
            <text>
              <uni-icons color="#FF2121" type="fire-filled" size="16"></uni-icons>
            </text>
          </view>
          <!-- 热门搜索内容 -->
          <view class="hot-list">
            <template v-for="(item, index) in 8">
              <view class="item">
                <w-search-commodity-card></w-search-commodity-card>
              </view>
            </template>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="search-result-list">
        <w-commodity-list></w-commodity-list>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">
// scss
$header-height: 88rpx;
.container {
  padding-top: calc($header-height + var(--status-bar-height));
}

.header-nav {
  width: 100%;
  background: $theme-background;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;

  .header-view {
    height: $header-height;
    padding: 0 30rpx;
    display: flex;
    align-items: center;

    .search-view {
      flex: 1;
      background-color: #fff;
      border-radius: 999px;
      margin: 0 30rpx;

      :deep(.uni-easyinput) {
        height: 60rpx;
      }
    }

    .right-btn {
      color: #fff;
      font-size: 28rpx;
    }
  }
}

.search-history-view {
  background-color: #fff;
  padding: 20rpx 40rpx 40rpx;

  .history-view {
    margin-bottom: 30rpx;

    :deep(.uni-section) {
      .uni-section-header {
        padding: 0;
        margin-bottom: 30rpx;
      }
    }

    .hsitory-list {
      .tag {
        display: inline-block;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        background-color: #f2f2f2;
        color: #999;
        border: none;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 999px;
      }
    }
  }

  .hot-search {
    .hot-title {
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    .hot-list {
      display: flex;
      flex-wrap: wrap;

      .item {
        margin-bottom: 20rpx;

        &:nth-child(odd) {
          width: calc(50% - 10rpx);
          margin-right: 10rpx;
        }

        &:nth-child(even) {
          width: calc(50% - 10rpx);
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>
